<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defineProperty</title>
</head>
<body>
    <div id="app">
        <input id="input" type="text" value='msg' oninput="setValue(event)">
    </div>
    <script>
        let data = {
            msg: 'word',
            count: 10
        }

        let vm = {}
        
        let input = document.getElementById('input')
        proxyData(data)

        // 将input的值与vm.msg绑定
        input.value = data[input.value]
        vm.msg = 'hello word1'

        function setValue (val) {
            vm.msg = val.target.value
        }

        function proxyData(data) {
            if (typeof data == 'object') {
                Object.keys(data).forEach(key => {
                    Object.defineProperty(vm, key, {
                        enumerable: true,
                        configurable: true,
                        get() {
                            return data[key]
                        },
                        set(val) {
                            console.log(val);
                            if (data[key] == val) return
                            data[key] = val
                            input.value = data[key]
                        }
                    })
                })

            }
        }
    </script>
    
</body>
</html>